<template>
    <div class="video">
        <video class="bigVideo" src="../../assets/img/videos-design-preview_1440.mp4" autoplay loop muted></video>
        <div class="test1">
            <p>
                同心寰宇
                <br>
                汇聚山海
            </p>
        </div>
        <div class="test2">
            <p class="big">
                寰宇同心
                <br>
                时光与美 圆融此间
            </p>
            <p class="small">
                坚韧与柔美，影像实力与美学设计，从未如此型投意合
            </p>
        </div>
        <div class="test3">
            <p class="big">
                时光格纹
                <br>
                传世光影 闪耀经纬
            </p>
            <p class="small">
                独家高定工艺，悬浮光雕饰纹，诠释隽永光影。
            </p>
        </div>
    </div>
</template>

<script setup>
// window.addEventListener('scroll', function () {
//     let opacityNum = 1
//     let distanceFromTop = document.documentElement.scrollTop;
//     let windowHeight = window.innerHeight;
//     let opacityNumber;
//     if (distanceFromTop - windowHeight * 1.5 < -220) {
//         document.querySelector('.test1').style.opacity = (1.4 + (distanceFromTop - windowHeight * 1.5) / (windowHeight * 2));
//         document.querySelector('.test1').style.transform = 'translateY(' + (-500 - (distanceFromTop - windowHeight * 1.5) / (windowHeight * 0.3) * 100) + 'px)';
//     }
//     if (distanceFromTop - windowHeight * 2 >= 0) {
//         document.querySelector('.test2').style.opacity = (distanceFromTop - windowHeight * 2) / (windowHeight * 0.2);
//         document.querySelector('.test2').style.transform = 'translateY(' + ((distanceFromTop - windowHeight * 2) / (windowHeight * 0.3) * 100) + 'px)';
//     }
//     if (distanceFromTop - windowHeight * 2.5 >= 200) {
//         document.querySelector('.test3').style.opacity = (distanceFromTop - windowHeight * 2.5) / (windowHeight * 0.1) - 5;
//         document.querySelector('.test3').style.transform = 'translateY(' + (1100 - (distanceFromTop - windowHeight * 2.5) / (windowHeight * 0.3) * 100) + 'px)';
//     }
//     // if (distanceFromTop - windowHeight * 2 >= 270) {
//     //     opacityNumber = 1 - (distanceFromTop / 3000); // 根据滚动距离计算透明度
//     //     opacityNumber = Math.max(opacityNumber, 0); // 确保透明度不小于0
//     //     console.log(opacityNumber);
//     //     document.querySelector('.test2').style.opacity = opacityNumber
//     // }
//     if (distanceFromTop < window.innerHeight / 2) {
//         opacityValue = 1; // 文本在屏幕中间时完全显示
//     } else {
//         opacityValue = 1 - ((distanceFromTop - window.innerHeight / 2) / 500); // 根据滚动距离计算透明度
//         opacityValue = Math.max(opacityValue, 0); // 确保透明度不小于0
//     }
// });

window.addEventListener('scroll', function() {
  var distanceFromTop = document.documentElement.scrollTop;
  let windowHeight = window.innerHeight;
  var text1 = document.querySelector('.test1');
  var text2 = document.querySelector('.test2');
  var text3 = document.querySelector('.test3');
  let num  = 4000

  var opacityValue1 = 1 - (distanceFromTop / num); // 根据滚动距离计算第一段文本的透明度
  var opacityValue2 = 1 - opacityValue1; // 第二段文本的透明度与第一段相反
  var opacityValue3;
//   console.log(distanceFromTop);
//     console.log(windowHeight);
  if (distanceFromTop < windowHeight / 2) {
    opacityValue3 = 1; // 文本在屏幕中间时完全显示
  } else {
    opacityValue3 = (distanceFromTop - windowHeight / 2) / num; // 根据滚动距离计算第三段文本的透明度
    opacityValue3 = Math.max(opacityValue3, 0); // 确保透明度不小于0
  }

  text1.style.opacity = opacityValue1;
  text1.style.transform = 'translateY(' + (-400 - (distanceFromTop - windowHeight * 1.5) / (windowHeight * 0.3) * 100) + 'px)';

  text2.style.opacity = opacityValue2;
  text2.style.transform = 'translateY(' + ((distanceFromTop - windowHeight * 2) / (windowHeight * 0.3) * 100) - 200 + 'px)';

  text3.style.opacity = opacityValue3;
  text3.style.transform = 'translateY(' + (1000 - (distanceFromTop - windowHeight * 2.5) / (windowHeight * 0.3) * 100) + 'px)';
});


</script>

<style lang="scss" scoped>
.video {
    position: relative;
    height: 2200px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    background-attachment: fixed;
    background-color: #000;

    .bigVideo {
        position: sticky;
        width: 100%;
        // height: 100vh;
        top: 0;
        left: 0;
        z-index: 1;
    }
}


.video .test1 {
    opacity: 0;
    transform: translateY(100%);
    // transform: translateY(-200%);

    position: absolute;
    z-index: 888;
    transition: opacity 0.5s;
    width: 100%;

    p {
        // text-align: center;
        color: #fff;
        font-size: 72px;
        // // top: 200px;
        // bottom: 0;
    }
}

.video .test2 {
    opacity: 0;
    transform: translateY(100%);
    position: absolute;
    z-index: 888;
    transition: opacity 0.5s;
    width: 100%;

    p {
        // text-align: center;
        color: #fff;
        // font-size: 72px;
        // top: 200px;
        // bottom: 0;

    }

    .big {
        font-size: 52px;
    }

    .small {
        font-size: 20px;
        margin-top: 20px;
    }
}

.video .test3 {
    opacity: 0;
    transform: translateY(100%);
    position: absolute;
    z-index: 888;
    transition: opacity 0.5s;
    width: 100%;

    p {
        // text-align: center;
        color: #fff;
        // font-size: 72px;
        // top: 200px;
        // bottom: 0;
    }

    .big {
        font-size: 52px;
    }

    .small {
        font-size: 20px;
        margin-top: 20px;

    }
}

// .video-bg {
//     width: 100%;
//     height: 680px;
//     // background-color: #000;
// }
</style>